<template>
  <div>
    <el-dialog title="解绑门店" class="noselect" :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
      <div style="margin: 20px;"></div>
    <div v-show="page1">
        <div class="text-center" style="padding-bottom:15px">第一步:填写相关信息</div>
        <div class="text-left" style="padding-left:100px">
          <div>此功能主要解决连锁总部下的门店脱离连锁总部成为单店的需求,相关须知如下:</div>
          <div>注意:</div>
          <div>1、为避免影响您的营业,建议您在非营业时间进行解绑;</div>
          <div>2、解绑前,请先跟门店进行会员相关业务的结算,避免解绑后无法对账</div>
          <div>3、解绑门店后,此门店的基础信息、库存相关、会员相关、报表等历史所有数据,均会从连锁总部脱离,连锁总部将不能查看到此门店所有数据;</div>
        </div>
    </div>
    <div v-if="page2">
      <div class="text-center" style="padding-bottom:15px">第二步:填写信息</div>
      <el-form   :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label=" " prop="name" :rules="[{ required: true, message: '请输入门店名称', trigger: 'blur' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
          <el-input placeholder="请输入门店名称" v-model="modelForm.name" auto-complete="off" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入门店名称">
                <el-button tabIndex="-1">门店名称</el-button>
              </el-tooltip>
            </template>
          </el-input>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="username"  :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
          <el-input placeholder="请输入用户名" v-model="modelForm.username" auto-complete="off" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入用户名">
                <el-button tabIndex="-1">用户名</el-button>
              </el-tooltip>
            </template>
          </el-input>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="password"  :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
          <el-input type="password" placeholder="请输入密码" v-model="modelForm.password" auto-complete="off" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入密码">
                <el-button tabIndex="-1">密码</el-button>
              </el-tooltip>
            </template>
          </el-input>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="page3">
        <div style="padding-bottom:20px">第三步:填写手机验证码</div>
        <el-form  :model="checkForm" ref="checkForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label=" "  props='phone' >
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
            <el-input :disabled="true" v-model="checkForm.phone" auto-complete="off" size="medium" >
              <template slot="prepend">
                <el-tooltip placement="top" content="请输入手机号码">
                  <el-button tabIndex="-1">已验证手机号码</el-button>
                </el-tooltip>
              </template>
            </el-input>
            </div>
          </el-form-item>
          <el-form-item prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]" class="register_dxyz">
            <el-input placeholder="请输入验证码" v-model="checkForm.code" class="w-100p">
              <template slot="prepend">
                <el-tooltip placement="top" content="请输入验证码">
                  <el-button tabIndex="-1">获取验证码</el-button>
                </el-tooltip>
              </template>
                <el-button slot="append" v-if="!time>0" @click="getCode">发送短信</el-button>
                <el-button  slot="append" v-if="time>0">{{time}}后重新发送</el-button>
            </el-input>
          </el-form-item>
        </el-form>
    </div>
    <div v-if="page4">
        <div style="padding-bottom:20px">第四步:解绑成功</div>
        <div style="font-weight:600;font-size:15px;">您的连锁门店成功转成单店!</div>
    </div>

      <div class="foot-bar-button" v-if="page4">
        <el-button type="primary" @click="resetForm" size="medium">确定</el-button>
      </div>
      <div class="foot-bar-button" v-if="page3">
        <el-button type="primary" size="medium" @click="returnPage">上一步</el-button>
        <el-button type="primary" @click="nextPage('checkForm')" size="medium">确定</el-button>
      </div>
      <div class="foot-bar-button" v-if="page1">
        <el-button type="primary" @click="nextPage('modelForm')" size="medium">下一步</el-button>
      </div>
      <div class="foot-bar-button" v-if="page2">
        <el-button type="primary" size="medium" @click="returnPage">上一步</el-button>
        <el-button type="primary" size="medium" @click="nextPage('modelForm')">下一步</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//注意路径
export default {
  props: ["isShow", "id"], //参数
  data() {
    var chackPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      modelForm: {
        password: "",
        name:"",
        username:""
      },
      checkForm: {
        phone: "",
        code: ""
      },
      merchant:{},
      showDialog: false,
      disabled: true,
      activityId: "",
      isSave: true,
      downCategeryId: [],
      isUpdate: false,
      treeData: [],
      radio: "",
      city: [],
      page1: true,
      page2: false,
      page3: false,
      page4: false,
      page5: false,
      time: 0,
    };
  },
  watch: {
    isShow: function(newValue, oldValue) {
      this.showDialog = newValue;
    }
  },
  created() {
    window.this = this;
  },
  methods: {
    returnPage() {
      if (this.page2 == true) {
        this.page2 = false;
        this.page1 = true;
        return;
      }
      if (this.page3 == true) {
        this.page3 = false;
        this.page2 = true;
        return;
      }
    },
    exportData() {
      this.disabled = false;
    },
    newLabel(newList) {
      if (newList) {
        for (var i = 0; i < newList.length; i++) {
          newList[i].label = newList[i].name;
          newList[i].value = newList[i].id + "";
          newList[i].children = null;
        }
      }
    },
    goBack() {
      this.router.go(-1);
    },
    resetForm(formName) {
      this.$emit("close");
      this.page1= true
      this.page2= false
      this.page3= false
      this.page4= false
      this.$refs[modelForm].resetFields();
      this.$refs[checkForm].resetFields();
    },
    handleClose(done) {
      this.$emit("close");
      done();
      this.page1= true
      this.page2= false
      this.page3= false
      this.page4= false
      this.$refs[this.formName].resetFields();
    },
    isNum(item, key) {
      var r = /^\+?[1-9][0-9]*$/;
      if (!r.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    },
    isDouble(item, key) {
      var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
      if (!isNum.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    },
    nextPage(formName) {
      if (this.page1 == true) {
            this.page1 = false;
            this.page2 = true;
        return;
      }
      if (this.page2 == true) {
        console.log("55555555");
        this.$refs[formName].validate(valid => {
          this.$axios.post("organization/branchs/unRelevanceValidate",this.modelForm,"json").then(res=>{
            if(res.success){
              this.merchant=res.content;
              this.checkForm.phone=res.content.phone;
              this.page2 = false;
              this.page3 = true;
              return;
            }else{
              this.$message.error(res.message);
              return;
            }

          },res=>{})
        });

      }
      if (this.page3 == true) {
        this.$refs[formName].validate(valid => {
          this.$axios.get("organization/branchs/verifySmsCode",{phone:this.checkForm.phone,code:this.checkForm.code}).then(res=>{
            if(res.success){
              this.$axios.post("organization/branchs/unRelevance",this.merchant,"json").then(res=>{
                if(res.success){
                  this.page4 = true;
                  this.page3 = false;
                  return;
                }else{
                  this.$message.error(res.message);
                  return;
                }
              },res=>{})
            }else{
              this.$message.error(res.message);
              return;
            }
          },res=>{})
        });
      }
      if(this.page4 == true){
        this.page4 = false;
        this.page5 = true;
      }
      // this.$refs[formName].resetFields();
    },
    getCode(){
      /*验证码*/
      if(!(/^1[3|2|4|5|7|8][0-9]\d{4,8}$/.test(this.checkForm.phone))){
        this.$message.error("请填写正确的手机号");
        return false;
      }
      if (this.checkForm.phone && this.checkForm.phone!="") {
        var $this = this;
        this.$axios.get("organization/merchantGroups/sendCode",{phone:this.checkForm.phone}).then(response=>{
          if(response.success){
            this.isShowSms=true;
            window.countDown = 60;
            this.time=window.countDown;
            window.t = setInterval(function () {
              window.countDown--;
              $this.time = window.countDown;
              if (window.countDown == 0) {
                window.clearInterval(window.t)
              }
            }, 1000);
            this.$message.success("验证码发送成功");
          }else{
            this.$message.error(response.message);
          }
        });
      }else{
        this.$message.error("请输入手机号");
      }

    },
  }
};
</script>
<style scoped>
.el-from-item_title {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #48576a;
  line-height: 1;
  padding: 11px 12px 11px 0;
  box-sizing: border-box;
}
.el-from-item_content {
  line-height: 36px;
  position: relative;
  font-size: 15px;
}
</style>
